<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>优医问诊-首页</title>
    <link rel="icon" href="../favicon.ico" />
    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../css/index.css" />
    <link
      rel="stylesheet"
      crossorigin="anonymous"
      href="https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Medium.min.css"
    />
    <link
      rel="stylesheet"
      crossorigin="anonymous"
      href="https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Bold.min.css"
    />
  </head>
  <body>
    <header class="header">
      <div class="headerTop">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
        >
          <path
            d="M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11H1L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11H20V20ZM12 17L15.3588 13.6412C16.2374 12.7625 16.2374 11.3379 15.3588 10.4592C14.4801 9.58056 13.0555 9.58056 12.1768 10.4592L12 10.636L11.8232 10.4592C10.9445 9.58056 9.51992 9.58056 8.64124 10.4592C7.76256 11.3379 7.76256 12.7625 8.64124 13.6412L12 17Z"
          ></path>
        </svg>
        <h1>优医问诊</h1>
      </div>
      <div class="headerBottom">
        <div class="headerSearch">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
          >
            <path
              d="M11 1.99964C11.2639 1.99964 11.525 2.01348 11.7832 2.03578C11.4424 2.63427 11.202 3.29716 11.084 4.0016C11.056 4.00127 11.028 3.99965 11 3.99965C7.13263 3.99965 4.00021 7.13233 4 10.9997C4 14.8672 7.1325 17.9997 11 17.9997C12.8956 17.9997 14.6148 17.2468 15.875 16.0241L16.0244 15.8747C17.247 14.6145 18 12.8951 18 10.9997C18 10.9714 17.9974 10.9429 17.9971 10.9147C18.7018 10.7968 19.3642 10.5563 19.9629 10.2155C19.9852 10.4739 20 10.7355 20 10.9997C20 13.1235 19.2632 15.077 18.0312 16.6169L22.3135 20.8991L20.8994 22.3132L16.6172 18.0309C15.0773 19.263 13.124 19.9997 11 19.9997C6.032 19.9997 2 15.9677 2 10.9997C2.00021 6.03182 6.03213 1.99964 11 1.99964ZM16.5293 1.31898C16.7059 0.893192 17.2942 0.89318 17.4707 1.31898L17.7236 1.93031C18.1556 2.9731 18.9616 3.80582 19.9746 4.25648L20.6924 4.57582C21.1026 4.75864 21.1026 5.35584 20.6924 5.53871L19.9326 5.8766C18.9449 6.31588 18.1534 7.11911 17.7139 8.12758L17.4668 8.69302C17.2864 9.10715 16.7137 9.10715 16.5332 8.69302L16.2871 8.12758C15.8476 7.11895 15.0552 6.31593 14.0674 5.8766L13.3076 5.53871C12.8974 5.35585 12.8974 4.75863 13.3076 4.57582L14.0254 4.25648C15.0385 3.80582 15.8445 2.97312 16.2764 1.93031L16.5293 1.31898Z"
            ></path>
          </svg>
          <span>搜一搜：疾病/症状/药品</span>
        </div>
      </div>
    </header>
    <!-- 金刚区 -->
    <nav class="navBar">
      <div class="navBarTop">
        <ul>
          <li>
            <a href="#">
              <img src="../img/doctor.svg" alt="" />
              <h4>问医生</h4>
              <p>按科室查问医生</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="../img/graphic.svg" alt="" />
              <h4>极速问诊</h4>
              <p>20s内医生极速回复</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="../img/prescribe.svg" alt="" />
              <h4>开药门诊</h4>
              <p>线上买药更方便</p>
            </a>
          </li>
        </ul>
      </div>
      <div class="navBarBottom">
        <ul>
          <li>
            <a href="#">
              <img src="../img/order.svg" alt="" />
              <h4>药品订单</h4>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="../img/docs.svg" alt="" />
              <h4>健康档案</h4>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="../img/rp.svg" alt="" />
              <h4>我的处方</h4>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="../img/find.svg" alt="" />
              <h4>疾病查询</h4>
            </a>
          </li>
        </ul>
      </div>
    </nav>
    <!-- 轮播图 -->
    <div class="carousel">
      <a href="#">
        <img src="../img/get.png" alt="" />
      </a>
    </div>
    <!-- 内容区 -->
    <div class="tabsCard">
      <ul>
        <li>关注</li>
        <li class="active">推荐</li>
        <li>护肤</li>
        <li>减脂</li>
        <li>饮食</li>
      </ul>
      <div class="line"></div>
    </div>
    <div class="homeTabs">
      <div class="tabsContent">
        <div class="tabsItem">
          <div class="itemLeft">
            <img src="../img/deafaultAvatar.jpg" alt="" />
            <div class="userName">
              <p>王医生</p>
              <p>积水潭医院 皮肤科 主任医师</p>
            </div>
          </div>
          <div class="itemRight">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
            >
              <path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path>
            </svg>
            <span>关注</span>
          </div>
        </div>
        <div class="tabsTatle">
          <h4>炎热夏季如何防晒？</h4>
          <p># 儿童健康</p>
        </div>
        <div class="tabsPart">
          <p>
            炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
          </p>
        </div>
        <div class="tabsImg">
          <img src="../img/5.jpg" alt="" />
          <img src="../img/5.jpg" alt="" />
          <img src="../img/5.jpg" alt="" />
        </div>
        <div class="tabsState">
          <div>
            <p>12 收藏</p>
            <p>12 评论</p>
          </div>
        </div>
      </div>
    </div>
    <div class="tabsContent">
      <div class="tabsItem">
        <div class="itemLeft">
          <img src="../img/deafaultAvatar.jpg" alt="" />
          <div class="userName">
            <p>王医生</p>
            <p>积水潭医院 皮肤科 主任医师</p>
          </div>
        </div>
        <div class="itemRight">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
          >
            <path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path>
          </svg>
          <span>关注</span>
        </div>
      </div>
      <div class="tabsTatle">
        <h4>炎热夏季如何防晒？</h4>
        <p># 儿童健康</p>
      </div>
      <div class="tabsPart">
        <p>
          炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
        </p>
      </div>
      <div class="tabsImg">
        <img src="../img/5.jpg" alt="" />
        <img src="../img/5.jpg" alt="" />
        <img src="../img/5.jpg" alt="" />
      </div>
      <div class="tabsState">
        <div>
          <p>12 收藏</p>
          <p>12 评论</p>
        </div>
      </div>
    </div>
    <div class="tabsContent">
      <div class="tabsItem">
        <div class="itemLeft">
          <img src="../img/deafaultAvatar.jpg" alt="" />
          <div class="userName">
            <p>王医生</p>
            <p>积水潭医院 皮肤科 主任医师</p>
          </div>
        </div>
        <div class="itemRight">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
          >
            <path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path>
          </svg>
          <span>关注</span>
        </div>
      </div>
      <div class="tabsTatle">
        <h4>炎热夏季如何防晒？</h4>
        <p># 儿童健康</p>
      </div>
      <div class="tabsPart">
        <p>
          炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
        </p>
      </div>
      <div class="tabsImg">
        <img src="../img/5.jpg" alt="" />
        <img src="../img/5.jpg" alt="" />
        <img src="../img/5.jpg" alt="" />
      </div>
      <div class="tabsState">
        <div>
          <p>12 收藏</p>
          <p>12 评论</p>
        </div>
      </div>
    </div>
    <div class="tabsContent">
      <div class="tabsItem">
        <div class="itemLeft">
          <img src="../img/deafaultAvatar.jpg" alt="" />
          <div class="userName">
            <p>王医生</p>
            <p>积水潭医院 皮肤科 主任医师</p>
          </div>
        </div>
        <div class="itemRight">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
          >
            <path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path>
          </svg>
          <span>关注</span>
        </div>
      </div>
      <div class="tabsTatle">
        <h4>炎热夏季如何防晒？</h4>
        <p># 儿童健康</p>
      </div>
      <div class="tabsPart">
        <p>
          炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
        </p>
      </div>
      <div class="tabsImg">
        <img src="../img/5.jpg" alt="" />
        <img src="../img/5.jpg" alt="" />
        <img src="../img/5.jpg" alt="" />
      </div>
      <div class="tabsState">
        <div>
          <p>12 收藏</p>
          <p>12 评论</p>
        </div>
      </div>
    </div>
    <!-- 导航栏 -->
     <nav class="navHome">
      <div class="next">
        <img src="../img/index-active.svg" alt="">
        <p>首页</p>
      </div>
      <div class="next">
        <img src="../img/article-default.svg" alt="">
        <p>健康百科</p>
      </div>
      <div class="next">
        <img src="../img/notice-default.svg" alt="">
        <p>消息通知</p>
      </div>
      <div class="next">
        <img src="../img/mine-default.svg" alt="">
        <p>我的</p>
      </div>
     </nav>
  </body>
</html>
